<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./font2/iconfont.css">
    <style>
        .top{
            background-color:#6259eb;
            padding: 20px ;
            
        }
        .top_text{
            font-size: 30px;
            color: #ffffff;
            padding-left: 40px;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .slide{
            width: 200px;
            /* height: 200px; */
            background-color: #b2adfc;
          
            /* padding: 0 0; */
            padding: 31.3px 0;
            /* padding-left: 20px; */
            /* position: relative; */
        }
        .slide ul{
            list-style: none;
        }
        .slide ul li{
            height: 60px;
            width: 100%;
            line-height: 60px;
            text-align: center;
            box-sizing: border-box;
            
            
        }
        .slide ul li a{
            display: inline-block;
            text-decoration: none;
            color: #ffffff;
            font-size: 23px;
            
        }
        .slide ul li:hover{
            background-color: #6259eb;
        }

        table{
            border-collapse: collapse;
            width: 100%;
            
        }
        
        table td{
            
            border: 1px solid #6259eb;
            height: 50px;
            text-align: center;
        }
        .td1{
            background-color: #958ef8;
            
        }
        .table{
            height: 100%;
            width: 89.6%;
            position:absolute;
            top: 79px;
            left: 200px;
            /* padding: 10px; */
            display: none;
        }
        .slide ul li:hover > .table{
            display: block;
        }

        .img1{
            position: absolute;
            top: 121px;
            left: 10px;
        }
        .img2{
            position: absolute;
            top: 188px;
            left: 16px;
        }
        .img3{
            position: absolute;
            top: 22px;
            left: 10px;
        }
        .img4{
            position: absolute;
            font-size: 37px;
            top: 22px;
            left: 1860px;
            
        }
        .img5{
            position: absolute;
            font-size: 39px;
            top: 22px;
            left: 1800px;
            
        }

        
    </style>
</head>
<body>
    <div class="top"> 
    <span class="top_text"><img class="img3" src="D:\源码\html\避难场所\系统.png" width="40px" height="40px" >全国应急避难场所辅助调度系统
        <span class="iconfont icon-tuichu img4" title="退出"></span>
        <span class="iconfont icon-xiaoxi img5" title="消息"> </span>
    </span>    
    </div>

    <div class="slide">
        <ul>
            <li>
                <a href="#"><img class="img1" src="D:\源码\html\避难场所\事件.png" width="42px" height="42px" >事件信息</a>
                <div class="table">
                    <table>
                        <tr class="td1">
                            <td>序号</td>
                            <td>事件名称</td>
                            <td>行政区划</td>
                            <td>发生时间</td>
                            <td>事件种类</td>
                            <td>事件阶段</td>
                            <td>操作</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>单元格9</td>
                            <td>单元格10</td>
                            <td>单元格11</td>
                            <td>单元格12</td>
                            <td>单元格13</td>
                            <td><input type="submit" value="查看"> <input type="submit" value="删除"></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>单元格16</td>
                            <td>单元格17</td>
                            <td>单元格18</td>
                            <td>单元格19</td>
                            <td>单元格20</td>
                            <td>单元格21</td>
                        </tr>
                    </table>
                </div>
                
            </li>
            <li>
                <a href="#" ><img class="img2" src="D:\源码\html\避难场所\运行日志.png" width="34px" height="34px" >状态信息</a>
            </li>
        </ul>
    </div>
    
</body>
</html>